<template>
  <div class="dashboard-container">
    <el-button type="text" @click="open">click to open the Dialog</el-button>

    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="65%" :before-close="handleClose">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">【题库】：面试宝典</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">【学科】：{{sub.subjectName}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">【题型】：{{detail.questionType}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【编号】：{{detail.number}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【难度】：{{detail.difficulty}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【标签】：{{detail.tags}}</div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">【目录】：{{dir.directoryName}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【企业】：{{company.company}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【方向】：{{detail.direction}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【城市】：{{detail.city}}</div>
        </el-col>
      </el-row>
      <div class="line"></div>
      <el-row :gutter="20" style="margin-top:40px">
        <el-col :span="18">
          <div class="grid-content bg-purple">
            【题干】：{{detail.question}}
            <div v-for="item in options" :key="item.id" class="optionitem">
              <el-radio v-model="radio" :label="item.isRight">
                <span :class="{'red':item.isRigth == 1}"></span>
                {{item.title}}
              </el-radio>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="line"></div>
      <el-row :gutter="20" style="margin-top:40px">
        <el-col :span="18">
          <div class="grid-content bg-purple">【参考答案】{{detail.chkRemarks}}</div>
        </el-col>
      </el-row>

      <div class="line"></div>
      <el-row :gutter="20" style="margin-top:40px">
        <el-col :span="18">
          <div class="grid-content bg-purple">【答案解析】{{detail.answer}}</div>
        </el-col>
      </el-row>

      <div class="line"></div>
      <el-row :gutter="20" style="margin-top:40px">
        <el-col :span="18">
          <div class="grid-content bg-purple">【题目备注】{{detail.remarks}}</div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { detail as comDetail } from '@/api/hmmm/companys'
import { detail as dictiondetail } from '@/api/hmmm/directorys'
import { detail as subdetail } from '@/api/hmmm/subjects'

export default {
  name: 'QuestionsPreview',
  data() {
    return {
      dialogVisible: false,
      detail: '',
      company: '',
      cate: 0,
      dir: '',
      sub: '',
      options: [],
      radio: 1
    }
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
    },
    fetchQuesDetail(id) {
      detail({ id: id })
        .then(data => {
          this.detail = data.data
          this.options = this.detail.options
          return this.detail.enterpriseID
        })
        .then(eid => {
          comDetail({ id: eid }).then(data => {
            this.company = data.data
          })
          return this.detail.catalogID
        })
        .then(catalogID => {
          dictiondetail({ id: catalogID }).then(data => {
            this.dir = data.data
          })
          return this.detail.subjectID
        })
        .then(subjectID => {
          subdetail({ id: subjectID }).then(data => {
            this.sub = data.data
          })
        })
    },
    open(id) {
      this.dialogVisible = true
      this.fetchQuesDetail(id)
    }
  }
}
</script>

<style scoped >
.red {
  color: red;
}
.el-row {
  margin-bottom: 10px;
}
.grid-content {
  font-weight: 700;
  font-size: 12px;
  min-height: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.line {
  height: 1px;
  width: 70%;
  background: #eee;
}

.optionitem {
  margin: 15px 0 5px 5px;
}
</style>
